<script setup lang="ts">
import ModeCardTab from "@/views/Student/UseModel/component/mode-card-tab.vue";
import HandleTrainFile from "@/views/Student/UseModel/component/handle-train-file.vue";
import HandleModelAdjust from "@/views/Student/UseModel/component/handle-model-adjust.vue";
import HandleTestFile from "@/views/Student/UseModel/component/handle-test-file.vue";
import HandleTrainModel from "@/views/Student/UseModel/component/handle-train-model.vue";
import { ref, toRefs } from 'vue';
import { useRouter, useRoute} from "vue-router";
import {RollbackOutlined} from "@ant-design/icons-vue";

const router=useRouter()
const route=useRoute()

// 路由传参
const {query} = toRefs(route)
console.log(query)
let modelId = ref<number>(+query.value.id)
let activeTab = ref<number>(1)
const handleChangeTab = (i:number) => {
  activeTab.value = i
}
const goBack = () => {
  router.go(-1)
}
</script>

<template>
  <a-layout class="one-model-layout app-bg">
    <a-layout-header class="one-model-header">
      已选择模型:{{ query.modelName }}
    </a-layout-header>
    <a-layout-content class="one-model-content">
      <mode-card-tab @change-tab="handleChangeTab"></mode-card-tab>
      <div class="tab-content-model">
        <keep-alive>
          <handle-train-file v-if="activeTab===1"></handle-train-file>
        </keep-alive>
        <keep-alive>
          <handle-train-model v-if="activeTab===2"></handle-train-model>
        </keep-alive>
        <keep-alive>
          <handle-test-file v-if="activeTab===3"></handle-test-file>
        </keep-alive>
        <keep-alive>
          <handle-model-adjust v-if="activeTab===4"></handle-model-adjust>
        </keep-alive>
      </div>
    </a-layout-content>
    <a-float-button type="default" @click="goBack" :style="{left: '12px',}">
      <template #icon>
        <RollbackOutlined />
      </template>
    </a-float-button>
  </a-layout>
</template>

<style scoped lang="scss">
.one-model-layout{
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.one-model-header{
  background: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  color: #57A9FB;
  box-shadow:0 1px 0 0 #73A4D2FF;
}
.one-model-content{
  width: 100%;
  padding: 1rem 3rem;
  height: auto;
  margin: 0;
}
.tab-content-model{
  width: 100%;
  height: auto;
  padding: 0;
}
</style>
